<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!-- 整个函数传输过去 -->
        <MyHeader :addTodo="addTodo" />

        <MyList :todos="todos" :checkTodo="checkTodo" />

        <MyFooter />
      </div>
    </div>
  </div>
</template>

<script>
  import MyHeader from "./components/MyHeader"
  import MyList from "./components/MyList"
  import MyFooter from "./components/MyFooter"

  export default {
    name: "App",
    data() {
      return {
        todos: [
          {id:"001", title:"抽烟", done: true},
          {id:"002", title:"喝酒", done: false},
          {id:"003", title:"开车", done: true}
        ]
      }
    },
    components: {
      MyHeader,
      MyList,
      MyFooter
    },
    methods: {
      // 添加一个todo
      addTodo(todoObj) {
        this.todos.unshift(todoObj);
      },
      // 勾选or取消勾选一个todo
      checkTodo(id) {
        this.todos.forEach(item => {
          if(item.id == id) {
            item.done = !item.done
          }
        })
      }
    }
  };
</script>

<style>
  * {
    box-sizing: border-box;
  }
  ul, li {    
    padding: 0;
    list-style: none;
  }
  .todo-container {
    width: 600px;
    margin: 10px auto;
    padding: 14px 20px;
    border: 1px solid #dfdfdf;
    border-radius: 6px;
  }
  .btn {
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    border: 1px solid transparent;
  }
  .btn-danger {
    background-color: darkorange;
  }
</style>